<template> 
  <div id="tab">
    只是我接受到的i &#x3000;&#x3000;{{i}}
    <ul>
      <li v-for="(item, i) in tabs" :key="i" @click="tabClick(item)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "tab",
  // props: ['tabs'],
  // props还可以以对象的方式接受父组件传递过来的数据
  props: {
    // tabs 父组件绑定的属性的名字
    tabs: {
      // type定义需要传递的数据的数据类型
      
      type: Array,
      // 当要接受的值是数组或者对象的时候 需要用工厂函数返回默认值
      default() {
        return ['item1', 'item2', 'item3', 'item3']
      }
    },
    i: {
      type: String,
      // required 值为true表示改数据必须传递过来
      required: true,
      // default: '你是个麻瓜'
    }
  },
  data() {
    return {
    }
  },
  methods: {
      tabClick(tab) {
        // console.log(this.bus)
        this.bus.$emit('setdata', tab)
      }
  }
}
</script>

<style scoped>
/* style 添加了scoped属性后 样式只在当前组件内生效  */
ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}
</style>
